<template>
  <el-tabs type="border-card" class="demo-tabs wrapper">
	  
    <el-tab-pane>
		<template #label>
		    <span class="custom-tabs-label" v-if="pieceNum!=0">
		        <el-badge :value="pieceNum" class="item" type="danger">计件重审</el-badge>
		    </span>
			<span class="custom-tabs-label" v-if="pieceNum==0">
				计件重审
			</span>
		</template>
        <Piece ></Piece>
    </el-tab-pane>
	
    <el-tab-pane>
		<template #label>
		    <span class="custom-tabs-label" v-if="kpiNum!=0">
		        <el-badge :value="kpiNum" class="item" type="danger">提成重审</el-badge>
		    </span>
			<span class="custom-tabs-label" v-if="kpiNum==0">
				提成重审
			</span>
		</template>
        <KPI ></KPI>
    </el-tab-pane>
	
    <el-tab-pane>
		<template #label>
		    <span class="custom-tabs-label" v-if="scoreNum!=0">
		        <el-badge :value="scoreNum" class="item" type="danger">评分重审</el-badge>
		    </span>
			<span class="custom-tabs-label" v-if="scoreNum==0">
				评分重审
			</span>
		</template>
        <Score ></Score>
    </el-tab-pane>
	
    <el-tab-pane>
		<template #label>
		    <span class="custom-tabs-label" v-if="okrNum!=0">
		        <el-badge :value="okrNum" class="item" type="danger">okr重审</el-badge>
		    </span>
			<span class="custom-tabs-label" v-if="okrNum==0">
				okr重审
			</span>
		</template>
        <Okr ></Okr>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import {ref, onMounted, reactive,getCurrentInstance,onBeforeMount} from "vue";
import { useRoute } from 'vue-router'
import { Timer } from '@element-plus/icons-vue';
import { Calendar } from '@element-plus/icons-vue'
import Piece from './components/piece'
import KPI from './components/KPI'
import Score from './components/score'
import Okr from './components/okr'
import { getBackThirdKpi ,getBackThirdPiece,getBackThirdOkr,getBackThirdScore } from "@/api/task";


let empId = JSON.parse(localStorage.getItem("userInfo")).id;
const pieceNum = ref(0);
const kpiNum = ref(0);
const scoreNum = ref(0);
const okrNum = ref(0);
onBeforeMount(() => {
  getBackThirdPiece({ empId }).then((data) => {
    pieceNum.value = data.data.length
  });
  getBackThirdKpi({ empId }).then((data) => {
    kpiNum.value = data.data.length
  });
  getBackThirdOkr({ empId }).then((data) => {
    okrNum.value = data.data.length
  });
  getBackThirdScore({ empId }).then((data) => {
    scoreNum.value = data.data.length
  });
  
});


const update = () => {
  getBackThirdPiece({ empId }).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "更新成功",
        type: "success",
      });
      pieceNum.value = data.data.length;
    } else {
      ElMessage.error("更新失败");
    }
  });
  
  getBackThirdKpi({ empId }).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "更新成功",
        type: "success",
      });
      kpiNum.value = data.data.length;
    } else {
      ElMessage.error("更新失败");
    }
  });
  
  getBackThirdScore({ empId }).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "更新成功",
        type: "success",
      });
      scoreNum.value = data.data.length;
    } else {
      ElMessage.error("更新失败");
    }
  });
  
  getBackThirdOkr({ empId }).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "更新成功",
        type: "success",
      });
      okrNum.value = data.data.length;
    } else {
      ElMessage.error("更新失败");
    }
  });
  
};








</script>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
.wrapper {
  box-shadow: 0px 0px 10px 3px #00000014;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}
</style>
